<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <table border="1" cellspacing="0" cellpadding="7">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
            <th>班级</th>
            <th>总成绩</th>
        </tr>
        <tr v-for="(student,index) in students">
            <td>{{index+1}}</td>
            <td>{{student.name}}</td>
            <td>{{student.age}}</td>
            <td>{{student.class}}</td>
            <td>{{total(index)}}</td>
        </tr>
    </table>
</div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data: {
            students: [
                {
                    name: "张三",
                    age: 18,
                    class: "软工一班",
                    scores: {
                        math: 80,
                        chinese: 90,
                        history: 88
                    }
                },
                {
                    name: "李四",
                    age: 20,
                    class: "软工一班",
                    scores: {
                        math: 88,
                        chinese: 60,
                        history: 88
                    }
                },
                {
                    name: "王五",
                    age: 22,
                    class: "软工二班",
                    scores: {
                        math: 77,
                        chinese: 88,
                        history: 90
                    }
                },
                {
                    name: "马六",
                    age: 23,
                    class: "软工二班",
                    scores: {
                        math: 90,
                        chinese: 77,
                        history: 55
                    }
                }
            ]
        },
        methods:{
            total(index){
                var sum=0;
                var score=this.students[index].scores;
                for (const i in score) { //i为key
                    sum+=score[i];
                }
                return sum;
            }
        }
    })
</script>
